<template>
  <div>
    <div class="container">
      <div>
        <ol class="breadcrumb">
          <li><a href="#">工具箱</a></li>
          <li class="active">苹果plist文件在线制作</li>
        </ol>
      </div>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="content">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="title">苹果plist文件在线制作</div>
              </el-col>
            </el-row>
            <div class="col-sm-offset-1 col-sm-11" style="z-index:99">
              <form class="form-horizontal frombox">
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-3 control-label" id="inputEmail3">APP名称：</label>
                  <div class="col-sm-9">
                    <input v-model="APPName.appName" type="text" class="form-control" placeholder="请你输入您的APP名称" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-3 control-label">包名(Bundle ID)：</label>
                  <div class="col-sm-9">
                    <input v-model="APPName.BundleID" type="text" class="form-control" placeholder="请输入所填写的Bundle ID" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-3 control-label">IPA下载地址：</label>
                  <div class="col-sm-9">
                    <input v-model="APPName.DownUrl" type="text" class="form-control"
                      placeholder="请输入您的APP下载链接，https://开头" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-3 control-label">ICON链接地址：</label>
                  <div class="col-sm-9">
                    <input v-model="APPName.APPICON" type="text" class="form-control"
                      placeholder="请输入您的APP ICON的链接地址" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-6 col-sm-6">
                    <button type="submit" class="btn btn-default button_plist" @click="handelCreateFile">
                      生成文件
                    </button>
                  </div>
                </div>
              </form>
            </div>
            <el-row style="z-index: 1">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <hr class="hr" />
                <div class="text1">
                  PS：什么是Plist文件？通过Plist文件实现itms-services协议在线安装IPA，在iOS7以后，plist文件必须部署到HTTPS服务器上，才能下载IPA。
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <server></server>


    </div>
    <statement></statement>
  </div>
</template>

<script>
  import statement from "@/components/common/statement";
  import server from "@/components/common/server";


  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      statement,
      server
    },
    data() {
      //这里存放数据
      return {
        labelPosition: "right",
        formLabelAlign: {
          name: "",
          region: "",
          type: "",
          icon: "",
        },
        APPName: {
          appName: '',
          BundleID: '',
          DownUrl: '',
          APPICON: '',
        }
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      handelCreateFile() {
        console.log(this.APPName.appName);
        console.log(this.APPName.BundleID);
        console.log(this.APPName.DownUrl);
        console.log(this.APPName.APPICON);
        var params = new URLSearchParams();
        params.append("appName", String(this.APPName.appName));
        params.append("bundleID", String(this.APPName.BundleID));
        params.append("ipaUrl", String(this.APPName.DownUrl));
        params.append("iconUrl", String(this.APPName.APPICON));
        this.$post(this.API.PlistCreate, params).then((res) => {
          let blob = new Blob([res.data], {
            type: 'application/vnd.ms-xml'
          })
          console.log(blob)
          let fileName = Date.parse(new Date()) + '.plist'
          if (window.navigator.msSaveOrOpenBlob) {
            // console.log(2)
            navigator.msSaveBlob(blob, fileName)
          } else {
            // console.log(3)
            var link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            //释放内存
            window.URL.revokeObjectURL(link.href)
          }
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  };

</script>
<style scoped>
  .breadcrumb {
    margin: 20px 0px 0px 0px;
    background-color: transparent;
  }

  .content {
    background: #ffffff;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }

  .title {
    text-align: center;
    margin-top: 50px;

    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
  }

  .text {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #8f8f8f;
    line-height: 20px;
  }

  .text span {
    font-size: 14px;

    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #ff7226;
    line-height: 20px;
  }

  .text1 {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #47a9ff;
    line-height: 20px;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 45px;
  }

  .img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }

  .hr {
    margin-left: 30px;
    margin-right: 30px;
  }

  .frombox {
    max-width: 700px;
    margin-top: 46px;
    margin-left: 10px;
  }

  .col-sm-3 {
    padding-right: 0px !important;
  }

  div>>>.button_plist {
    width: 160px;
    height: 36px;
    color: #ffffff;
    background: #167df1;
    border-radius: 4px;
    margin-top: 40px;
    padding: 0px;
  }

  .but {
    display: flex;
    justify-content: center;
    align-items: center;
  }

</style>
